<template>
    <page class="index">

        <div class="content">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <ul class="tabBar">
            <router-link active-class="routerActiveClass" :to="{name:'movie'}" tag="li"><span class="iconfont icon-dianying"></span>电影</router-link>
            <router-link active-class="routerActiveClass" :to="{name:'cinema'}" tag="li"><span class="iconfont icon-yingyuana"></span>影院</router-link>
            <router-link active-class="routerActiveClass" :to="{name:'boxoffice'}" tag="li"><span class="iconfont icon-paihangbang"></span>票房</router-link>
            <router-link active-class="routerActiveClass" :to="{name:'my'}" tag="li"><span class="iconfont icon-wode"></span>我的</router-link>
        </ul>
    </page>
</template>

<script>

    export default {
        name: "index",
        data() {
            return {

            }
        },
        created() {

        },
        
       
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";

    .index {
        @include flexbox(column);

        .content {
            @include flexbox(column);
            flex: 1;
            overflow: auto;
        }

        .tabBar {
            @include flexbox();
            height: 1.1rem;
            border-top: 1px solid lightgray;
            justify-content: space-around;

            >li {
                @include flexbox(column);
                justify-content: center;
                font-size: .24rem;
                align-items: center;
                .iconfont {
                    font-size: .50rem
                }
            }
        }
    }
.routerActiveClass{
        color: $primaryColor;
}

</style>